<template>
    <div class="account">
        <div class="acea-row row-between-wrapper">
            <div class="search acea-row row-middle">
                <span class="iconfont icon-search_light ml10"></span>
                <input class="ml10" style="flex: 1;" type="text" placeholder="请输入搜索名字">
            </div>
            <div class="btn">搜素</div>
        </div>
        <div class="acea-row row-right mt20">
            <div class="acea-row row-middle row-center add" @click="open">
                <span class="iconfont icon-tianjia"></span>
                <span style="margin-left: 5px">添加</span>
            </div>
        </div>

        <div class="list">
            <div class="item acea-row row-between-wrapper" v-for="(item,index) in 10" :key="index">
                <div class="acea-row row-middle">
                    <div class="avatar">

                    </div>
                    <div class="acea-row row-column row-between ml20 font14">
                        <div>名称： <span class="bold">中世纪</span> </div>
                        <div class="mt20">简介： <span class="bold">地否撒旦佛语按时服用废弃物</span> </div>
                    </div>
                    <div class="ml150 font14">
                        <div>联系人： <span class="bold">钟老板</span> </div>
                        <div class="mt20">联系方式： <span class="bold">18078529497</span> </div>
                    </div>
                </div>
                <div class="acea-row row-middle">
                    <div class="del-btn" @click.stop="selPerson()">删除</div>
                    <div class="edit-btn" @click.stop="editPerson()">编辑</div>
                </div>
            </div>
        </div>

        <Col class="demo-spin-col" span="8">
            <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
            </Spin>
        </Col>
        <div class="acea-row row-right page">
            <Page
                    :total="total"
                    :current="from.page"
                    show-elevator
                    show-total
                    @on-change="pageChange"
                    :page-size="from.limit"
            />
        </div>

        <Modal v-model="modal1" width="600" :footer-hide="true" class-name="vertical-center-modal">
            <div style="text-align:center;height: 500px;" class="mt20">
                <div class="acea-row row-middle">
                    <div class="name-box">照片</div>
                    <div class="upload" v-viewer>
                        <img class="imgwh" :src="from.image" alt="">
                    </div>
                    <div class="upload-btn">
                        <Upload
                                :show-upload-list="false"
                                :headers="header"
                                :data="uploadData"
                                :on-success="handleSuccess"
                                :format="['jpg', 'jpeg', 'png', 'gif']"
                                :on-format-error="handleFormatError"
                                :action="upload" >
                            <span>本地上传</span>
                        </Upload>
                    </div>
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">名称</div>
                    <Input v-model="name" size="large" placeholder="请输入名称~" style="width: 400px" />
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">联系人</div>
                    <Input v-model="name" size="large" placeholder="请输入名字~" style="width: 400px" />
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">联系电话</div>
                    <Input v-model="name" size="large" placeholder="请输入联系号码~" style="width: 400px" />
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">简介</div>
                    <Input v-model="name" size="large" type="textarea" placeholder="请输入简介~" style="width: 400px" />
                </div>
                <div class="submit">提交保存</div>
                <div class="delete" @click="delected">删除用户</div>
            </div>
        </Modal>

        <Modal
                v-model="delmodel"
                title="是否确认删除用户"
                @on-ok="del_user"
                @on-cancel="cancel">
            <p>删除后将不能再指派,请你确认是否删除</p>
        </Modal>

    </div>
</template>

<script>
    import { getCookies } from "@/libs/util";
    export default {
        name: "Index",
        data(){
            return {
                modal1: false,
                name:'',
                delmodel:false,
                header: { 'Authori-zation':  'Bearer ' + getCookies("token") },
                uploadData: {
                    filename: "file",
                },
                upload: '',
                from:{
                    image:'',
                    page:1,
                    limit:10,
                },
                total:100,

            }
        },
        methods:{
            editPerson(){
                this.modal1 = !this.modal1;
            },
            selPerson(){
                this.delmodel = !this.delmodel;
            },
            pageChange(index){
                this.from.page = index;

            },
            delected(){
                this.delmodel = !this.delmodel;
                this.modal1 = !this.modal1

            },
            del_user(){

            },
            cancel(){

            },
            open(){
                this.modal1 = !this.modal1;
            },
            handleFormatError(file) {
                this.$Message.error("上传图片只能是 jpg、jpg、jpeg、gif 格式!");
            },
            update(e) {
                // 上传照片
                let file = e;
                let param = new FormData(); // 创建form对象
                param.append("filename", "file"); // 通过append向form对象添加数据进去
                param.append("file", file); // 通过append向form对象添加数据进去
                // 添加请求头
                console.log('param',param)
                uploadImg(param).then((res) => {
                    this.sendMsg(res.data.url, 3);
                });
            },
            // 上传成功
            handleSuccess(res, file, fileList) {
                if (res.status === 200) {
                    this.$Message.success(res.msg);
                    this.from.image = res.data.src;
                } else {
                    this.$Message.error(res.msg);
                }
            },

        }
    }
</script>

<style scoped lang="less">
    .delete{
        width: 500px;
        line-height: 50px;
        border-radius: 30px;
        text-align: center;
        color: #EB2D2D;
        background: rgba(235, 45, 45, 0.2);
        font-size: 16px;
        margin: 0 auto;
    }
    .submit{
        width: 500px;
        line-height: 50px;
        border-radius: 30px;
        text-align: center;
        color: #3C6CFE;
        background: rgba(60, 108, 254, 0.2);
        font-size: 16px;
        margin: 30px auto;
    }
    .name-box{
        width: 100px;
        text-align: right;
        color: #333333;
        font-size: 16px;
        margin-right: 20px;
    }
    .upload{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #999999;
        overflow: hidden;
    }
    .upload-btn{
        width: 100px;
        line-height: 30px;
        text-align: center;
        color: #3C6CFE;
        font-size: 14px;
        background-color: #E8EEFF;
        border-radius: 20px;
        margin-left: 20px;
    }

    .account{

        .search{
            flex: 1;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #666;
        }
        .btn{
            width: 80px;
            height: 32px;
            background-color: #2d8cf0;
            text-align: center;
            line-height: 32px;
            color: #FFFFFF;
            border-radius: 6px;
            margin-left: 20px;
        }
        .add{
            width: 80px;
            height: 32px;
            text-align: center;
            border-radius: 16px;
            background-color: #3C6CFE;
            color: #FFFFFF;
            font-size: 12px;
        }
        .list{
            margin-top: 20px;

            .item{
                width: 100%;
                /*height: 80px;*/
                border-radius: 6px;
                box-shadow: 0 0 5px #999;
                margin-bottom: 20px;
                padding: 20px;

                .avatar{
                    width: 80px;
                    height: 80px;
                    border-radius: 5px;
                    background-color: #999999;
                }

                .del-btn{
                    width: 100px;
                    height: 40px;
                    border-radius: 20px;
                    border: 1px solid #FE4F3C;
                    color: #FE4F3C;
                    text-align: center;
                    line-height: 40px;
                    font-size: 16px;
                    letter-spacing: 4px;
                }
                .edit-btn{
                    width: 100px;
                    height: 40px;
                    border-radius: 20px;
                    border: 1px solid #3C6CFE;
                    color: #3C6CFE;
                    text-align: center;
                    line-height: 40px;
                    font-size: 16px;
                    letter-spacing: 4px;
                    margin-left: 50px;
                }

            }

        }

    }
</style>
